<template>
    <view>
        <view class="orderInfo">
            <view class="orderInfoBox">
                <view class="h1">客户信息：</view>
                <view class="orderInfoList">
                    <view class="li">{{$lang('期望量尺日期')}}：{{ruleForm.order_info && ruleForm.order_info.delivery_time ? $common.formatDate(ruleForm.order_info.delivery_time * 1000) : '-'}}</view>
                    <view class="li">{{$lang('计划量尺日期')}}：{{ruleForm.order_info && ruleForm.order_info.plan_delivery_time ? $common.formatDate(ruleForm.order_info.plan_delivery_time * 1000) : '-'}} </view>
                    <view class="li">{{$lang('客户名称')}}：{{ruleForm.order_info.customer}} </view>
                    <view class="li">{{$lang('联系方式')}}：{{ruleForm.order_info.user_mobile}} </view>
                    <view class="li">{{$lang('客户地址')}}： {{ruleForm.order_info.user_address}}</view>
                </view>
            </view>
        </view>
        <view class="assemInfo">
            <view class="h1">{{$lang('订单信息')}}：</view>
            <view class="assemInfoMain">
                <view class="table">
                    <uni-table border :emptyText="$lang('暂无数据')">
                        <uni-tr class="tableHead">
                            <uni-th align="center" v-for="(item,index) in tableColumn" :key="index">{{$lang(item.label)}}</uni-th>
                        </uni-tr>
                        <uni-tr v-for="(item,index) in ruleForm.order_info.order_item" :key="index">
                            <uni-td align="center" v-for="(data,dataIndex) in tableColumn" :key="dataIndex">
                                <text v-if="data.value == 'index'">{{index + 1}}</text>
                                <view v-else-if="data.value == 'warehouse'">
                                    <text>{{item.warehouse.name}}</text>
                                </view>
                                <text v-else>{{item[data.value]}}</text>
                            </uni-td>
                        </uni-tr>
                    </uni-table>
                </view>
            </view>
        </view>
        <view class="assemInfo">
            <view class="h1">{{$lang('配送信息')}}：</view>
            <view class="assemInfoList">
                <view class="li" v-for="(item,index) in ruleForm.staff_info" :key="index">
                    <text v-if="item.type == 1">{{$lang('司机')}}：</text>
                    <text v-if="item.type == 2">{{$lang('安装工')}}：</text>
                    <text v-if="item.type == 3">{{$lang('量尺')}}：</text>
                    {{item.staff.name}}
                </view>
            </view>
            <view class="assemInfoMain">
                <uni-forms :modelValue="ruleForm" :rules="rules" ref="ruleForm" label-width="0" validateTrigger="blur">
                    <uni-forms-item :name="'install_image'">
                        <view class="li">
                            <view class="fl"><text class="red">*</text>{{$lang('安装照片')}}：</view>
                            <view class="frList">
                                <u-upload
                                        :fileList="fileList1"
                                        @afterRead="afterRead"
                                        @delete="deletePic"
                                        name="1"
                                        multiple
                                        :maxCount="1"
                                >
                                </u-upload>
                            </view>
                        </view>
                    </uni-forms-item>
                    <uni-forms-item :name="'type'">
                        <view class="li">
                            <view class="fl"><text class="red">*</text>{{$lang('客户是否签字')}}：</view>
                            <view class="frList">
                                <uni-data-checkbox v-model="ruleForm.type" @change="$forceUpdate()" :localdata="typeList" />
                            </view>
                        </view>
                    </uni-forms-item>
                    <uni-forms-item :name="'sign_image'" v-if="ruleForm.type == 2">
                        <view class="li">
                            <view class="fl"><text class="red">*</text>{{$lang('客户签名照片')}}：</view>
                            <view class="frList">
                                <u-upload
                                        :fileList="fileList2"
                                        @afterRead="afterRead"
                                        @delete="deletePic"
                                        name="2"
                                        multiple
                                        :maxCount="1"
                                >
                                </u-upload>
                            </view>
                        </view>
                    </uni-forms-item>
                    <uni-forms-item :name="'is_debt'">
                        <view class="li">
                            <view class="fl"><text class="red">*</text>{{$lang('尾款是否收取')}}：</view>
                            <view class="frList">
                                <uni-data-checkbox v-model="ruleForm.is_debt" @change="$forceUpdate()" :localdata="debtList" />
                            </view>
                        </view>
                    </uni-forms-item>
                    <uni-forms-item :name="'memo'">
                        <view class="li">
                            <view class="fl">{{$lang('备注')}}：</view>
                            <view class="fr">
                                <textarea v-model="ruleForm.memo" :placeholder="$lang('请输入备注')" />
                            </view>
                        </view>
                    </uni-forms-item>
                </uni-forms>
            </view>
        </view>
        <view class="footerFen"></view>
        <view class="footer">
            <view class="top">
                <view class="fl" @click="$common.back()">{{$lang('取消')}}</view>
                <view class="fr" @click="submit">{{$lang('确定')}}</view>
            </view>
        </view>
    </view>
</template>

<script>
    import {
        workOrderdeliveryPageData,
        workOrderDelivery
    } from '../../api/api'
    export default {
        data() {
            return {
                ruleForm:{},
                rules:{
                    /*install_image: {
                        rules: [
                            { required: true, errorMessage: this.$lang('请上传安装照片') }
                        ]
                    },
                    sign_image: {
                        rules: [
                            { required: true, errorMessage: this.$lang('请上传客户签名照片') }
                        ]
                    },*/
                },
                tableColumn:[
                    {label:this.$lang('序号'),value:'index'},
                    {label:this.$lang('商品代码'),value:'goods_code'},
                    {label:this.$lang('商品名称'),value:'goods_name'},
                    {label:this.$lang('商品数量'),value:'num'},
                    {label:this.$lang('出货仓库'),value:'warehouse'},
                    {label:this.$lang('商品金额'),value:'goods_money'},
                ],
                fileList1:[],
                fileList2:[],
                rulesType:'',
                typeList: [
                    {
                        text: '未签字',
                        value: 1
                    },
                    {
                        text: '已签字',
                        value: 2
                    }
                ],
                debtList: [
                    {
                        text: '已收',
                        value: 1
                    },
                    {
                        text: '未收',
                        value: 2
                    }
                ],
            }
        },
        onLoad(options) {
            this.ruleForm.id = options.id;
            uni.setNavigationBarTitle({
                title: this.$lang('配送安装单')
            });
            this.getList();
        },
        methods: {
            delSize(index){
                this.ruleForm.size.splice(index,1);
                this.$forceUpdate();
            },
            addSize(){
                this.ruleForm.size.push({
                    value:''
                });
                this.$forceUpdate();
            },
            // 删除图片
            deletePic(event) {
                this[`fileList${event.name}`].splice(event.index, 1)
            },
            // 新增图片
            afterRead(event) {
                // 当设置 multiple 为 true 时, file 为数组格式，否则为对象格式
                let lists = [].concat(event.file)
                let fileListLen = this[`fileList${event.name}`].length
                lists.map((item) => {
                    this[`fileList${event.name}`].push({
                        ...item,
                        status: 'uploading',
                        message: '上传中'
                    })
                })
                for (let i = 0; i < lists.length; i++) {
                    this.$common.upLoadImg(lists[i].url).then(result => {
                        let item = this[`fileList${event.name}`][fileListLen]
                        this[`fileList${event.name}`].splice(fileListLen, 1, Object.assign(item, {
                            status: 'success',
                            message: '',
                            url: result.data.url,
                        }))
                        fileListLen++;
                    });
                }
            },
            submit(){
                let install_image = [];
                if(this.fileList1.length > 0){
                    this.fileList1.forEach(item => {
                        install_image.push(item.url);
                    })
                }
                this.ruleForm.install_image = install_image.toString();

                if(this.ruleForm.type == 2){
                    let sign_image = [];
                    if(this.fileList2.length > 0){
                        this.fileList2.forEach(item => {
                            sign_image.push(item.url);
                        })
                    }
                    this.ruleForm.sign_image = sign_image.toString();
                }
                this.$forceUpdate();
                if(!this.ruleForm.install_image){
                    return uni.showToast({
                        title:this.$lang('请上传安装照片'),
                        icon:'none'
                    })
                }
                if(this.ruleForm.type == 2){
                    if(!this.ruleForm.sign_image){
                        return uni.showToast({
                            title:this.$lang('请上传客户签名照片'),
                            icon:'none'
                        })
                    }
                }
                this.$refs.ruleForm.validate().then(valid => {
                    workOrderDelivery(this.ruleForm).then(res => {
                        if(res.code == 1){
                            uni.showToast({
                                title:this.$lang('配送安装单提交成功'),
                                icon:'none'
                            });
                            setTimeout(() => {
                                this.$common.back();
                                uni.$emit('returnData',1);
                            },500)
                        } else{
                            uni.showToast({
                                title:res.msg,
                                icon:'none'
                            })
                        }
                    })
                }).catch(err => {
                    console.log(err);
                })
            },
            getList(){
                workOrderdeliveryPageData(this.ruleForm).then(res => {
                    let id = this.ruleForm.id;
                    this.ruleForm = res.data;
                    this.ruleForm.id = id;
                    this.ruleForm.type = 1;
                    this.ruleForm.is_debt = 1;
                })
            }
        }
    }
</script>

<style lang="scss" scoped>
    .orderInfo{
        padding: 0 20rpx;
        margin-top: 30rpx;
        .orderInfoBox{
            background: #eff2f8;
            border-radius: 10rpx;
            padding: 35rpx 0;
            .h1{
                font-size: 28rpx;
                color: #222;
                position: relative;
                padding-left: 30rpx;
                &:after{
                    content: '';
                    width: 8rpx;
                    height: 30rpx;
                    border-radius: 8rpx;
                    background: #365aa6;
                    position: absolute;
                    left: 0;
                    top: 50%;
                    transform: translateY(-50%);
                }
            }
            .orderInfoList{
                padding: 0 37rpx;
                margin-top: 10rpx;
                .li{
                    font-size: 30rpx;
                    line-height: 55rpx;
                    color: #222;
                }
            }
        }
    }
    .assemInfo{
        margin-top: 50rpx;
        .h1{
            font-size: 28rpx;
            color: #222;
            position: relative;
            padding-left: 30rpx;
            &:after{
                content: '';
                width: 8rpx;
                height: 30rpx;
                border-radius: 8rpx;
                background: #365aa6;
                position: absolute;
                left: 0;
                top: 50%;
                transform: translateY(-50%);
            }
        }
        .assemInfoList{
            padding: 0 25rpx;
            margin-top: 20rpx;
            .li{
                font-size: 30rpx;
                line-height: 55rpx;
                color: #222;
            }
        }
        .assemInfoMain{
            padding: 30rpx;
            .h2{
                display: flex;
                align-items: center;
                font-size: 32rpx;
                color: #555;
                margin-bottom: 22px;
                text{
                    color: #365aa6;
                }
            }
            .li{
                display: flex;
                flex-direction: column;
                .fl{
                    font-size: 32rpx;
                    color: #222;
                }
                .fr{
                    display: flex;
                    align-items: center;
                    position: relative;
                    min-height: 90rpx;
                    border: 1px solid #747474;
                    padding: 0 33rpx;
                    border-radius: 10rpx;
                    margin-top: 15rpx;
                    .frTop{
                        display: flex;
                        align-items: center;
                        position: relative;
                        min-height: 90rpx;
                    }
                    input{
                        font-size: 32rpx;
                        color: #222;
                        padding-right: 15rpx;
                        width: 100%;
                    }
                    textarea{
                        padding-top: 20rpx;
                        font-size: 32rpx;
                        color: #222;
                    }
                    image{
                        width: 60rpx;
                        height: 60rpx;
                        &.rotate180{
                            transform: rotateZ(180deg);
                        }
                    }
                    /deep/ .uni-date{
                        /*.uni-date-picker__container{
                            position: absolute;
                            left: -50%;
                            .uni-popper__arrow{
                                left: 50%;
                            }
                        }*/
                        .uni-date-x--border{
                            border:none;
                            border-radius: 8rpx;
                            .uni-date-x{
                                border-radius: 8rpx;
                                font-size: 32rpx;
                                .uni-icons{
                                    font-size: 40rpx !important;
                                    color: #365aa6 !important;
                                }
                                .uni-date__x-input{
                                    height: 90rpx;
                                    line-height: 90rpx;
                                    font-size: 32rpx;
                                    margin-left: 12rpx;
                                }
                            }
                        }
                    }
                    .stockList{
                        padding-bottom: 20rpx;
                        .listLi{
                            display: flex;
                            align-items: center;
                            justify-content: space-between;
                            height: 90rpx;
                            background: #eff2f8;
                            border-radius: 10rpx;
                            padding: 0 50rpx;
                            .listLiFl{
                                display: flex;
                                align-items: center;
                                text{
                                    font-size: 30rpx;
                                    color: #365aa6;
                                }
                                input{
                                    width: 80rpx;
                                    margin: 0 15rpx;
                                    border-bottom: 1px solid #365aa6;
                                    text-align: center;
                                    font-size: 30rpx;
                                    color: #365aa6;
                                }
                            }
                            .listLiFr{
                                image{
                                    width: 22rpx;
                                    height: 22rpx;
                                    vertical-align: middle;
                                }
                            }
                        }
                    }
                }
                .frList{
                    margin-top: 25rpx;
                    .ol{
                        width: 500rpx;
                        height: 90rpx;
                        border-radius: 10rpx;
                        background: #eff2f8;
                        padding: 0 40rpx;
                        position: relative;
                        display: flex;
                        align-items: center;
                        justify-content: space-between;
                        margin-top: 18rpx;
                        &:first-child{
                            margin-top: 0;
                        }
                        /deep/ .uni-easyinput{
                            flex: 1;
                            .uni-easyinput__content{
                                background-color: transparent !important;
                                input{
                                    font-size: 30rpx;
                                    color: #222;
                                    padding: 0 !important;
                                }
                            }
                        }
                        .del{
                            width: 22rpx;
                            height: 22rpx;
                            margin-left: 15rpx;
                        }
                        .add{
                            width: 40rpx;
                            height: 40rpx;
                            position: absolute;
                            right: -75rpx;
                            top: 50%;
                            transform: translateY(-50%);
                        }
                    }
                }
            }
        }
    }
    .footerFen{
        height: 179rpx;
    }
    .footer{
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        padding: 24rpx 24rpx 45rpx 24rpx;
        background: #fff;
        z-index: 99;
        .top{
            display: flex;
            align-items: center;
            justify-content: space-between;
            .fl{
                width: 280rpx;
                height: 90rpx;
                border-radius: 90rpx;
                text-align: center;
                line-height: 90rpx;
                font-size: 36rpx;
                color: #555;
                border: 1px solid #c9c9c9;
                background: #fff;
            }
            .fr{
                width: 400rpx;
                height: 90rpx;
                border-radius: 90rpx;
                text-align: center;
                line-height: 90rpx;
                background: #365aa6;
                color: #fff;
                font-size: 36rpx;
            }
        }
    }
</style>
